
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/load-image.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/canvas-to-blob.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/bootstrap.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.iframe-transport.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload-process.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload-image.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload-audio.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload-video.js'); ?>"></script>
<script type="text/javascript" src="<?php echo URL::getLink('script/upload/jquery.fileupload-validate.js'); ?>"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#avatar').change(function(evt){
            var f = evt.target.files[0];
            var reader = new FileReader();

            if (!f.type.match('image.*')) {
                alert("The selected file does not appear to be an image.");
                return;
            }
            reader.onload = function (e) {
                var img = $('<img/>');
                img.attr("src", e.target.result).load(function () {
                    $('#image_preview').attr("src",e.target.result);
                });

            };
            reader.readAsDataURL(f);
        }); 

        // Change this to the location of your server-side upload handler:
        var url = window.location.hostname === 'blueimp.github.io' ?
        '//jquery-file-upload.appspot.com/' : '~upload/upload',
        uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
            data = $this.data();
            $this
            .off('click')
            .text('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
            data.submit().always(function () {
                $this.remove();
            });
        });
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {
                var node = $('<p/>')
                .append($('<span/>').text(file.name));
                if (!index) {
                    node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
                }
                node.appendTo(data.context);
            });
        }).on('fileuploadprocessalways', function (e, data) {
            $('#progress .progress-bar').css('width','0px');
            var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
            if (file.preview) {
                node
                .prepend('<br>')
                .prepend(file.preview);
            }
            if (file.error) {
                node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
            }
            if (index + 1 === data.files.length) {
                data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }).on('fileuploaddone', function (e, data) {
            $.each(data.result.files, function (index, file) {
                if (file.url) {
                    var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                    $(data.context.children()[index])
                    .wrap(link);
                } else if (file.error) {
                    var error = $('<span class="text-danger"/>').text(file.error);
                    $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
                }
            });
        }).on('fileuploadfail', function (e, data) {
            $.each(data.files, function (index, file) {
                var error = $('<span class="text-danger"/>').text('File upload failed.');
                $(data.context.children()[index])
                .append('<br>')
                .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>
<?php
    if(isset($template->aParams['error']))
    {
        echo "<h1>ERROR: ".$template->get('error')."</h1>";
    }
?>
<form action="" method="POST" enctype="multipart/form-data">
    <div class="preview" style="width: 100px;height:150px;border:1px solid #333;position:relative;">
        <img id="image_preview" src="" alt="" style="width: 100px;height:150px;position:absolute;left:0px;top:0px;">
        <input type="file" name="avatar" id="avatar" style="opacity:0;width: 100px;height:150px;;position:absolute;left:0px;top:0px;">
    </div>

    <label>File name</label>
    <input type="text" name="title">
    <input type="submit" value="OK">
</form>


<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input type="file" multiple name="files[]" id="fileupload">
</span>

<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files">
</div>

<?php
    $oDatabase = new database();
    $aCondition = array(
        'id > 20' => 'AND',
        'id < 30' => ''
    );
    $oDatabase->delete('aaaa', $aCondition);
    echo '<h1>'.$oDatabase->sSql.'</h1>';
?>